<template>
  <DialogVue :dialogVisible="dialogVisible" @closeModal="closeModal">
    <div class="dialog-title">
      <h3>注销账号</h3>
      <p>您的账号一旦被注销成功将不可恢复</p>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="btn cancle" @click="closeModal">取消</el-button>
        <el-button class="btn submit" @click="loginOut">确认</el-button>
      </div>
    </template>
  </DialogVue>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 弹出框
import DialogVue from "@components/dialog/index.vue";
// api
import { userLogout } from "@api/user";
// store
import { useGlobalStore } from "@stores";
const userStore = useGlobalStore().userStore;
// 确认注销
const loginOut = async () => {
  const res = await userLogout();
  if (res.code != 0) return;
  ElNotification({
    showClose: true,
    message: res.errorMessage,
    type: "success",
  });
  userStore.outLogin();
};
// 关闭弹窗
const emits = defineEmits(["closeDialog"]);
const dialogVisible = ref(true);
const closeModal = () => {
  dialogVisible.value = false;
  emits("closeDialog");
};
</script>

<style lang="scss" scoped>
.dialog-title {
  text-align: center;
  p,
  h3 {
    margin: 0;
  }
  h3 {
    font-size: 19px;
    font-weight: 400;
    color: #232323;
    margin-bottom: 19px;
  }
  p {
    font-size: 11px;
    color: #6b6b6b;
    line-height: 22px;
  }
}
.dialog-footer {
  margin-top: 80px;
  padding: 0 34px;
  display: flex;
  .btn {
    flex: 1;
    height: 39px;
    border-radius: 8px 8px 8px 8px;
    font-size: 17px;
  }
  .cancle {
    color: #232323;
    background: #c7c7c7;
  }
  .submit {
    background: #c90000;
    color: #ffffff;
  }
}
</style>
